/**
 * create by Alec
 */
import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import PropTypes from "prop-types";
import { createForm } from "rc-form";
import { List } from '@ali/ding-ui';

const Item = List.Item;

//将store注入组件的props
const mapStateToProps = () => ({});
//将action与dispatch进行绑定并注入组件的props
const mapDispatchToProps = dispatch => ({
    //区分绑定到props的action与传递的props
    actions: bindActionCreators(
        {
            dispatch,
        },
        dispatch
    )
});

@connect(mapStateToProps, mapDispatchToProps)
class DeptList extends Component {
    static defaultProps = {};
    //propTypes 验证
    static propTypes = {
        actions: PropTypes.shape({
            dispatch: PropTypes.func.isRequired,
        })
    };
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        const { deptList = [], expiryDate } = this.props || {};
        const list = deptList.map((item, index) => {
            return (
                <Item extra={`${item.totalPeople}人`} arrow="horizontal" key={index}
                    disabled
                    onClick={() => this.props.chooseDept(item)}
                >
                    <span className="dept_name">{item.deptName}</span>
                </Item>
            )
        })
        return (
            <div className="dept-list mt-32">
                {
                    (deptList.length > 0) ? 
                    <List className="list">
                        {list}
                    </List>  : 
                    <div className="no-dept">无下级部门</div>
                }
            </div>
        );
    }
}
export default createForm()(DeptList);
